<!-- 运营-机具 -->
<template>
	<view class="device-layout">
		<view class="device-item" :class="[(index == 0 || index == 9) ? `device-item-${index}` : '',item.bgClassName]" v-for="(item,index) in dataList" :key="item.title">
			<text>{{item.title}}</text>
			<view class="device-count">
				<text class="device-count-text">{{item.count}}</text>
				<text>{{item.unit}}</text>
			</view>
			<text>{{item.subTitle}}</text>
			<image class="what-icon" src="/static/operate/what_white.png" mode="aspectFit" v-if="item.isLook" @tap="showRole(item)"></image>
		</view>
		<xh-role-pop ref="roleRef"></xh-role-pop>
	</view>
</template>

<script setup>
	import { ref,onMounted} from 'vue'
	import { getOperateDeviceData } from '@/common/api/api.js'
	const roleRef = ref(null)
	const dataList = ref([{
			title: '机具数',
			unit: '台',
			count: 0,
			subTitle: '直营率0%',
			//是否有查看说明图标
			isLook: true,
			//背景样式类名
			bgClassName:'device-item-bg-blue-big'
		},
		{
			title: '有效绑定数',
			unit: '台',
			count: 0,
			subTitle: '绑定率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName:'device-item-bg-blue-small'
		},
		{
			title: '总激活数',
			unit: '台',
			count: 0,
			subTitle: '直营激活率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName:'device-item-bg-red-small'
		},
		{
			title: '直营绑定数',
			unit: '台',
			count: 0,
			subTitle: '直营绑定率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName:'device-item-bg-blue-small'
		},
		{
			title: '直营激活数',
			unit: '台',
			count: 0,
			subTitle: '直营激活率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName:'device-item-bg-red-small'
		},
		{
			title: '今日绑定',
			unit: '台',
			count: 0,
			subTitle: '昨日绑定0台',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName:'device-item-bg-blue-small'
		},
		{
			title: '今日激活',
			unit: '台',
			count: 0,
			subTitle: '昨日激活0台',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName:'device-item-bg-red-small'
		},
		{
			title: '本月绑定',
			unit: '台',
			count: 0,
			subTitle: '上月绑定0台',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName:'device-item-bg-blue-small'
		},
		{
			title: '本月激活',
			unit: '台',
			count: 0,
			subTitle: '上月激活0台',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName:'device-item-bg-red-small'
		},
		{
			title: '商户数',
			unit: '人',
			count: 0,
			subTitle: '本月新增0人',
			//是否有查看说明图标
			isLook: true,
			//背景样式类名
			bgClassName:'device-item-bg-green-big'
		},
		{
			title: '近30天交易商户数',
			unit: '人',
			count: 0,
			subTitle: '活跃率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName:'device-item-bg-green-small'
		},
		{
			title: '近60天交易商户数',
			unit: '人',
			count: 0,
			subTitle: '活跃率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName:'device-item-bg-green-small'
		}
	])
	//查看说明
	const showRole = (item)=>{
		if(item.title == '机具数'){
			roleRef.value.show({title:'直营率说明',content:'评估代理直营的指标数，计算方式为：未划拨机具数/总接收机具数'})
		}
		else{
			roleRef.value.show({title:'商户活跃说明',content:'评估代理展业商户健康指数，活跃率计算方式为：近X天内有交易的商户数/总商户数（不包含服务费）'})
		}
	}
	const getOperateDeviceInfo = async ()=>{
		const res = await getOperateDeviceData()
		const data = res.result
		dataList.value.forEach(item=>{
			if(item.title == '机具数'){
				item.count = data.deviceAllNum
				item.subTitle = `直营率${data.deviceDirectScale}%`
			}
			else if(item.title == '有效绑定数'){
				item.count = data.deviceBindAllNum
				item.subTitle = `绑定率${data.deviceBindScale}%`
			}
			else if(item.title == '总激活数'){
				item.count = data.deviceAllActiveNum
				item.subTitle = `激活率${data.deviceAcitveScale}%`
			}
			else if(item.title == '直营绑定数'){
				item.count = data.deviceDirectBindNum
				item.subTitle = `直营绑定率${data.deviceDirectBindScale}%`
			}
			else if(item.title == '直营激活数'){
				item.count = data.deviceActiveNum
				item.subTitle = `直营激活率${data.deviceActiveDirectScale}%`
			}
			else if(item.title == '今日绑定'){
				item.count = data.bindTodayNum
				item.subTitle = `昨日绑定${data.bindYesterdayNum}台`
			}
			else if(item.title == '今日激活'){
				item.count = data.activeTodayNum
				item.subTitle = `昨日激活${data.activeYesterdayNum}台`
			}
			else if(item.title == '本月绑定'){
				item.count = data.deviceBindThisMonthNum
				item.subTitle = `上月绑定${data.deviceBindLastMonthNum}台`
			}
			else if(item.title == '本月激活'){
				item.count = data.deviceActiveThisMonthNum
				item.subTitle = `上月激活${data.deviceActiveLastMonthNum}台`
			}
			else if(item.title == '商户数'){
				item.count = data.merchantAllNum
				item.subTitle = `本月新增${data.merchantThisMonthNum}人`
			}
			else if(item.title == '近30天交易商户数'){
				item.count = data.transMerchantNumNew
				item.subTitle = `活跃率${data.merchantActiveScaleNew}%`
			}
			else if(item.title == '近60天交易商户数'){
				item.count = data.transMerchantNum
				item.subTitle = `活跃率${data.merchantActiveScale}%`
			}
		})
	}
	// 刷新数据
	const reloadData = ()=>{
		getOperateDeviceInfo()
	}
	defineExpose({
		reloadData
	})
	onMounted(()=>{
		console.log('组件挂着成功')
		reloadData()
	})
</script>

<style lang="scss" scoped>
	.device-layout {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		padding: 0 30rpx 30rpx;
		.device-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-size: 100% 100%;
			color: #ffffff;
			font-size: 24rpx;
			padding: 16rpx;
			position: relative;
			.device-count {
				display: flex;
				align-items: center;
				color: #ffffff;
				font-size: 24rpx;
				padding: 8rpx 0;

				.device-count-text {
					font-size: 32rpx;
				}
			}
			.what-icon{
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}
		.device-item-0,
		.device-item-9 {
			grid-column-start: 1;
			grid-column-end: 3;
		}
		.device-item-bg-blue-big {
			background-image: url('/static/operate/yy_jjs_bg_1@2x.png');
		}
		.device-item-bg-blue-small{
			background-image: url('/static/operate/yy_jjzbds_bg_2@2x.png');
		}
		.device-item-bg-red-small{
			background-image: url('/static/operate/yy_jjs_bg_2@2x.png');
		}
		.device-item-bg-green-big {
			background-image: url('/static/operate/yy_shs_bg_1@2x.png');
		}
		.device-item-bg-green-small{
			background-image: url('/static/operate/yy_shs_bg_2@2x.png');
		}
	}
</style>